<template>
    <div class="app-container">
      <div class="filter-container">
        <el-button  class="filter-item" type="primary" icon="el-icon-refresh" @click="handleRefresh">
          刷新
        </el-button>
        <!-- <el-input v-model="listQuery.searchMsg" placeholder="搜索内容" style="width: 200px;" class="filter-item filter-input" @keyup.enter.native="handleFilter" />
        <el-button  class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button> -->
        <!-- <el-button class="filter-item add" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus-outline" @click="handleCreate">
          添加
        </el-button> -->
      </div>
      <div class="tree">
        <el-tree
            :data="list"
            node-key="id"
            :expand-on-click-node="false"
            default-expand-all
           >
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="label">{{ node.label }} <span class="uri">{{ data.uri}}</span> </span>
                <span class="operate">
                <el-button
                    type="text"
                    size="mini"
                    @click="() => handleUpdate(data)">
                    修改
                </el-button>
                <el-button
                    type="text"
                    size="mini"
                    @click="() => handleDelete(data, node)">
                    删除
                </el-button>
                </span>
            </span>
        </el-tree>
        <div class="rightForm">
            <div class="tit">新增</div>
            <el-form ref="dataForm" :rules="rules2" :model="FormS" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
                <el-form-item label="父级" prop="parent_id">
                    <a-tree-select
                        v-model="FormS.parent_id"
                        style="width: 100%"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        :tree-data="parentName"
                        placeholder="Please select"
                        tree-default-expand-all
                    >
                    </a-tree-select>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="FormS.title" />
                </el-form-item>
                <el-form-item label="图标" prop="icon">
                    <el-input v-model="FormS.icon" />
                </el-form-item>
                <el-form-item label="路径" prop="extension">
                    <el-input v-model="FormS.extension" />
                </el-form-item>
                <el-form-item label="路由" prop="uri">
                    <el-input v-model="FormS.uri" />
                </el-form-item>
                <el-form-item label="显示" >
                    <el-switch
                        v-model="FormS.show"
                        active-color="#13ce66"
                        >
                    </el-switch>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                <el-button @click="resetting()">
                重置
                </el-button>
                <el-button type="primary" @click="createData()">
                提交
                </el-button>
                </div>
        </div>
      </div>
      
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form ref="dataForms" :rules="rules" :model="Form" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
              
            <el-form-item label="ID" prop="id">
                    <el-input v-model="Form.id" disabled/>
                </el-form-item>
            <el-form-item label="父级" prop="parent_id">
                <a-tree-select
                    v-model="Form.parent_id"
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="parentName"
                    placeholder="Please select"
                    tree-default-expand-all
                >
                </a-tree-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input v-model="Form.title" />
            </el-form-item>
            <el-form-item label="图标" prop="icon">
                <el-input v-model="Form.icon" />
            </el-form-item>
            <el-form-item label="路径" prop="extension">
                <el-input v-model="Form.extension" />
            </el-form-item>
            <el-form-item label="路由" prop="uri">
                    <el-input v-model="Form.uri" />
                </el-form-item>
            <el-form-item label="显示" >
                <el-switch
                    v-model="Form.show"
                    active-color="#13ce66"
                    >
                </el-switch>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
            提交
          </el-button>
        </div>
      </el-dialog>
  
    </div>
  </template>
  
  <script>
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import {List , Add, Update,Delete,hasAll} from '@/api/admin/menu'

//   import {}
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    components: { Pagination },
    name: 'menus',
    data() {
      return {
        list: null,
        listLoading: true,
        total:0,
        listQuery: {
          page: 1,
          limit: 10,
          searchMsg:""
        },
        dialogFormVisible:false,
        dialogStatus:"create",
        title:"",
        rules:{
            uri: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          parent_id: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          // extension: [
          //   { required: true, message: '请输入', trigger: 'blur' }
          // ]
          
        },
        rules2:{
            uri: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          title: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          parent_id: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          // extension1: [
          //   { required: true, message: '请输入', trigger: 'blur' }
          // ]
          
        },
        Form:{
          id:null,
          uri:"",
          title:"",
          parent_id:null,
          icon:"",
          show:true,
          extension:"",
          order:""
  
        },
        FormS:{
          id:null,
          uri:"",
          title:"",
          parent_id:null,
          icon:"",
          show:true,
          extension:"",
          order:""
  
        },
        roles:null,
        parentName:[]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        hasAll(this.listQuery).then(response => {
          let data = response.data
          
          console.log(data)
          const datas = this.iniMenu(data)
          this.list = datas
          // this.total = response.data.queryTotal
          // this.listQuery.page = response.data.page
          setTimeout(() => {
            this.listLoading = false
          }, 0.3 * 1000)
        })
  
      },
      meunini(data){
        this.parentName = [{
                title: '顶级',
                value: '0',
                key: '0',
                children:[]
            }]
            let arr1=[]
            for(let i=0;i<data.length;i++){
              data[i]['label'] = data[i].title
              data[i]['children'] = data[i].childrens
              let a = {
                  title: data[i].title,
                  value: data[i].id,
                  key: data[i].id,
                  children:[]
              }
            }
            
      },
      iniMenu(data){
        this.parentName = [{
                title: '顶级',
                value: '0',
                key: '0',
                children:[]
            }]
        let arr1=[]
        for(let i=0;i<data.length;i++){
            data[i]['label'] = data[i].title
            data[i]['children'] = data[i].childrens
            let a = {
                title: data[i].title,
                value: data[i].id,
                key: data[i].id,
                children:[]
            }
            arr1.push(a)
            for(let s =0;s<data[i].childrens.length;s++){
              if(data[i].childrens[s].childrens.length>0){
                data[i].childrens[s]['label'] = data[i].childrens[s].title
                data[i].childrens[s]['children'] = data[i].childrens[s].childrens
                let b = {
                    title: data[i].childrens[s].title,
                    value: data[i].childrens[s].id,
                    key: data[i].childrens[s].id,
                    children:[]
                }
                arr1[i].children.push(b)
                if(data[i].childrens[s].childrens.length>0){
                    for(let c=0;c<data[i].childrens[s].childrens.length;c++){
                      if(data[i].childrens[s].childrens[c].childrens.length>0){
                        data[i].childrens[s].childrens[c]['label'] = data[i].childrens[s].childrens[c].title
                        data[i].childrens[s].childrens[c]['children'] = data[i].childrens[s].childrens[c].childrens
                        let cc = {
                            title: data[i].childrens[s].childrens[c].title,
                            value: data[i].childrens[s].childrens[c].id,
                            key: data[i].childrens[s].childrens[c].id,
                            children:[]
                        }
                        arr1[i].children[s].children.push(cc)
                        for(let d=0;d<data[i].childrens[s].childrens[c].childrens.length;d++){
                          
                          data[i].childrens[s].childrens[c].childrens[d]['label'] = data[i].childrens[s].childrens[c].childrens[d].title
                          data[i].childrens[s].childrens[c].childrens[d]['children'] = data[i].childrens[s].childrens[c].childrens[d].childrens
                          let dd = {
                              title: data[i].childrens[s].childrens[c].childrens[d].title,
                              value: data[i].childrens[s].childrens[c].childrens[d].id,
                              key: data[i].childrens[s].childrens[c].childrens[d].id,
                              children:[]
                          }
                          arr1[i].children[s].children[c].children.push(dd)
                          console.log(data[i].childrens[s].childrens[c].childrens[d])
                        }
                      }else{
                        data[i].childrens[s].childrens[c]['label'] = data[i].childrens[s].childrens[c].title
                        data[i].childrens[s].childrens[c]['children'] = data[i].childrens[s].childrens[c].childrens
                        let cc = {
                            title: data[i].childrens[s].childrens[c].title,
                            value: data[i].childrens[s].childrens[c].id,
                            key: data[i].childrens[s].childrens[c].id,
                            children:[]
                        }
                        arr1[i].children[s].children.push(cc)
                      }
                        
                    }
                }else{
                    data[i].childrens[s].childrens[c]['label'] = data[i].childrens[s].childrens[c].title
                    data[i].childrens[s].childrens[c]['children'] = data[i].childrens[s].childrens[c].childrens
                    let cc = {
                            title: data[i].childrens[s].childrens[c].title,
                            value: data[i].childrens[s].childrens[c].id,
                            key: data[i].childrens[s].childrens[c].id,
                            children:[]
                        }
                        arr1[i].children[s].children.push(cc)
                }
                
              }else{
                data[i].childrens[s]['label'] = data[i].childrens[s].title
                data[i].childrens[s]['children'] = data[i].childrens[s].childrens
                let b = {
                    title: data[i].childrens[s].title,
                    value: data[i].childrens[s].id,
                    key: data[i].childrens[s].id,
                    children:[]
                }
                arr1[i].children.push(b)
              }
              
            }
        }
        this.parentName[0].children= arr1
        console.log(this.parentName)
          return data
      },
      getList() {
        this.listLoading = true
        List(this.listQuery).then(response => {
          let list = response.data
          const data = list
          this.list = data
          // this.total = response.data.queryTotal
          // this.listQuery.page = response.data.page
          setTimeout(() => {
            this.listLoading = false
          }, 0.3 * 1000)
        })
      },
      handleFilter(){
        //搜索
        this.listQuery.page = 1
        this.listQuery.searchMsg = this.listQuery.searchMsg.trim()
        this.fetchData()
      },
      handleCreate(){
        //新增
        this.dialogFormVisible = true
        this.title = "添加菜单"
        this.dialogStatus ='create'
        this.Form={
            id:null,
            uri:"",
            title:"",
            parent_id:null,
            icon:"",
            show:true
  
        }
        setTimeout(()=>{
            this.$refs['dataForm'].clearValidate();
        },300)
      },
        handleUpdate(row){
          //编辑
          this.dialogFormVisible = true
          this.title = "修改菜单"
          this.dialogStatus ='update'
          this.Form={
            id:row.id,
            uri:row.uri,
            title:row.title,
            parent_id:row.parent_id,
            icon:row.icon,
            show:Boolean(row.id) ,
            order:row.order,
            extension:row.extension
          }
          console.log(row)
          console.log(this.Form)
          
          
      },
      handleDelete(row,index){
        //删除
        this.$confirm('确认删除？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            Delete({id:row.id}).then(() => {
              this.$notify({
                title: 'Success',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              this.fetchData()
            })
          }).catch(() => {
          });
      },
      handleRefresh(){
        //列表刷新
        this.fetchData()
      },
      handleStatus(row){
        //更改状态
        console.log(row)
      },
      resetting(){
        setTimeout(()=>{
            this.$refs['dataForm'].resetFields();
        },300)
      },
      createData(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.FormS.show = Number(this.FormS.show)
            Add(this.FormS).then((response) => {
                this.fetchData()
                this.resetting()
                this.$notify({
                  title: 'Success',
                  message: '添加成功',
                  type: 'success',
                  duration: 2000
                })
              
            })
          }
        })
      },
      updateData(){
        this.$refs['dataForms'].validate((valid) => {
          if (valid) {
            this.Form.show = Number(this.Form.show)
            Update(this.Form).then(() => {
                this.dialogFormVisible = false
                this.fetchData()
                this.$notify({
                  title: 'Success',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                })
            })
            
          }
        })
      },
      
    }
  }
  </script>
  <style lang="scss" scoped>
  .filter-container{
    background: #fff;
    padding: 0 10px;
    .filter-item{
      margin: 10px 0;
    }
    .filter-input{
      margin-left:  20px;
    }
    .add{
      float: right;
    }
  }
  .tree{
    width: 100%;
    display: flex;
    .el-tree{
        width: 60%;
    }
    .rightForm{
        background: #fff;
        width: 35%;
        height: 490px;
        margin-left: 2.5%;
        margin-top: 30px;
        .tit{
            font-size: 20px;
            font-weight: bold;
            margin: 10px 20px;
            border-bottom: 1px solid #ddd;
        }
        .dialog-footer{
            display: flex;
            justify-content: space-around;
        }
    }
  }

  </style>
  